<template>
    <div >
      <el-tabs v-model="activeName" >
        <el-tab-pane label="用户分析" name="user">
          <div>
            <div class="mok-item">
              <div class="mok-title">
                用户概况及趋势
              </div>
              <div class="mok-item-type">
                <div class="mok-type-item">
                  <div class="type-title">新增用户
                    <el-tooltip class="item" effect="dark" content="与前一天对比的新增用户" placement="top-start">
                      <i class="el-icon-bell"></i>
                    </el-tooltip>
                  </div>
                  <div class="type-value">8</div>
                  <div class="type-title">较前一天   <i style="color: red;" class="el-icon-caret-top"></i>0%</div>
                </div>
                <div class="mok-type-item">
                  <div class="type-title">活跃用户
                    <el-tooltip class="item" effect="dark" content="与前一天对比的活跃用户" placement="top-start">
                      <i class="el-icon-bell"></i>
                    </el-tooltip>
                  </div>
                  <div class="type-value">53</div>
                  <div class="type-title">较前一天   <i style="color: red;" class="el-icon-caret-top"></i>0%</div>
                </div>
                <div class="mok-type-item">
                  <div class="type-title">累积用户
                    <el-tooltip class="item" effect="dark" content="所有用户数量" placement="top-start">
                      <i class="el-icon-bell"></i>
                    </el-tooltip>
                  </div>
                  <div class="type-value">132</div>
                  <div class="type-title">较前一天   <i style="color: red;" class="el-icon-caret-top"></i>0%</div>
                </div>
                <div class="mok-type-item">
                  <div class="type-title">管理员
                    <el-tooltip class="item" effect="dark" content="所有管理员数量" placement="top-start">
                      <i class="el-icon-bell"></i>
                    </el-tooltip>
                  </div>
                  <div class="type-value">3</div>
                  <div class="type-title">较前一天
                    <i style="color: red;" class="el-icon-caret-top"></i>0%</div>
                </div>
              </div>
              <div class="mok-item-pick">
                <EchartLine></EchartLine>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="数据概况" name="data">
          <div>
            <div class="mok-item">
              <div class="mok-title">
                数据概况
              </div>
              <div class="mok-item-type">
                <div class="mok-type-item">
                  <div class="type-title">访客数
                    <el-tooltip class="item" effect="dark" content="与前一天对比的访客数" placement="top-start">
                      <i class="el-icon-bell"></i>
                    </el-tooltip>
                  </div>
                  <div class="type-value">12</div>
                  <div class="type-title">作日全天   <i style="color: red;" class="el-icon-caret-top"></i>0%</div>
                </div>
                <div class="mok-type-item">
                  <div class="type-title">浏览量
                    <el-tooltip class="item" effect="dark" content="与前一天对比的浏览量" placement="top-start">
                      <i class="el-icon-bell"></i>
                    </el-tooltip>
                  </div>
                  <div class="type-value">53</div>
                  <div class="type-title">作日全天   <i style="color: red;" class="el-icon-caret-top"></i>0%</div>
                </div>
                <div class="mok-type-item">
                  <div class="type-title">支付订单数
                    <el-tooltip class="item" effect="dark" content="所有支付订单数" placement="top-start">
                      <i class="el-icon-bell"></i>
                    </el-tooltip>
                  </div>
                  <div class="type-value">20</div>
                  <div class="type-title">作日全天   <i style="color: red;" class="el-icon-caret-top"></i>0%</div>
                </div>
                <div class="mok-type-item">
                  <div class="type-title">结算金额
                    <el-tooltip class="item" effect="dark" content="所有结算金额" placement="top-start">
                      <i class="el-icon-bell"></i>
                    </el-tooltip>
                  </div>
                  <div class="type-value">0</div>
                  <div class="type-title">作日全天
                    <i style="color: red;" class="el-icon-caret-top"></i>0%</div>
                </div>
              </div>
            </div>

            <div class="mok-item">
              <div class="mok-title">
                热门排行
              </div>
              <div style="display: flex;justify-content: space-between">
                <div style="flex: 0 0 49%">
                  <h6>热门资讯TOP5</h6>
                  <el-table
                      :data="tableData"
                      border
                      stripe
                      style="width: 100%"
                      :default-sort = "{prop: 'date', order: 'descending'}"
                  >
                    <el-table-column
                        type="index"
                        label="排名"
                        sortable
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="title"
                        label="资讯标题">
                    </el-table-column>
                  </el-table>
                </div>
                <div style="flex: 0 0 49%">
                  <h6>热门话题TOP5</h6>
                  <el-table
                      :data="articleData"
                      border
                      stripe
                      style="width: 100%"
                      :default-sort = "{prop: 'date', order: 'descending'}"
                  >
                    <el-table-column
                        type="index"
                        label="排名"
                        sortable
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="title"
                        label="话题标题">
                    </el-table-column>
                  </el-table>
                </div>

              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="交易分析" name="deal">
            <div>
              <div class="mok-item">
                <div class="mok-title">
                  交易构成
                </div>
                <div class="mok-item-pick">
                  <EchartPointer></EchartPointer>
                </div>
              </div>
            </div>
        </el-tab-pane>
      </el-tabs>
    </div>
</template>

<script>
import EchartLine from "@/components/EchartLine";
import EchartPointer from "@/components/EchartPointer";
import {getArticlefont, getInformationfont} from "@/request";

export default {
  name: "index",
  data(){
    return {
      activeName:'user',
      articleData:[],
      tableData:[]
    }
  },
  components:{
    EchartPointer,
    EchartLine
  },
  created() {
    this.getInformation();
    this.getarticlefont();
  },
  methods:{
    handleClick(){},
    async getInformation(){
      let data=await getInformationfont();
      if(data.code!=200)return this.$message.error(data.message);
      this.tableData=data.data;
    },
    async getarticlefont(){
      let data=await getArticlefont();
      if(data.code!=200)return this.$message.error(data.message);
      this.articleData=data.data;
    }
  }
}
</script>

<style lang="scss" scoped>

  .mok-item{
    margin-bottom: 20px;
    .mok-title{
      height: 44px;
      line-height: 44px;
      padding-left: 20px;
      padding-right: 20px;
      font-size: 18px;
      background-color: #FAFAFA;
      border-left: 1px solid #38E1AB;
    }
    .mok-item-pick{
      margin: 20px 0;
    }
    .mok-item-type{
      .mok-type-item{
        width: 20%;
        height: 100px;
        margin-right: 10px;
        padding: 22px;
        border: 1px solid #F0F0F0;
        display: inline-block;
        margin-top: 20px;
        background-color: #fff;
        .type-title{
          font-size: 17px;
          color: #B2B2B2;
        }
        .type-value{
          margin: 12px 0;
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
  }
</style>